<!--  -->
<template>
  <div>
    <div class='payDocument'>
      <h3>付费文件</h3>
      <div class="down-file">
        <div class="file-item flex-a-c flex-j-sb"  v-for="(item,index) in (paidFile && paidFile.file_list)" :key="index">
          <div>{{item.doc_name}}</div>
            <div class="flex-a-c flex-j-sb file-right">
              <p>{{item.count}}次</p>
              <span v-if="paidFile.is_buy" @click="downloadClick(item)">下载</span>
              <span v-else>需购买后才能下载</span>
            </div>
        </div>
      </div>
    </div>
    <div class="file-service flex-a-c">
      <div class="kefu">
        <span class="icon-member_kefu iconfont"></span>
      </div>
      <p>服务期内一对一售后支持</p>
    </div>
  </div>
  
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
name:'',
//import引入的组件需要注入到对象中才能使用
components: {},
props:['paidFile'],
data() {
return {
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  downloadClick(item) {
    console.log(item);
    let uploadUrl = this.fun.getRealUrl("plugin.paid-file.api.file.index", {});
    let options = { id: item.id };
    this.debounce(this.exportDownload(uploadUrl,options),1000);
    
  },
  debounce(fn, delay) {
    let last, deferTimer;
    return function(args) {
      let that = this;
      let _args = arguments;
      let now = +new Date();
      if (last && now < last + delay) {
        clearTimeout(deferTimer);
        deferTimer = setTimeout(function() {
          last = now;
          fn.apply(that, _args);
        }, delay);
      } else {
        last = now;
        fn.apply(that, _args);
      }
    };
  },
  exportDownload(url, options = {}) {
    console.log('触发触发触发触发');
     // 添加加载提示
     this.$toast.loading({
        message: "下载中",
        forbidClick: true
      });
    return new Promise((resolve, reject) => {
      axios.defaults.headers["content-type"] = "application/json;charset=UTF-8";
      axios({
        method: "post",
        url: url, // 请求地址
        data: options, // 参数
        // responseType: "blob" // 表明返回服务器返回的数据类型
      }).then(
        response => {
          resolve(response);
          let res = response.data;
          let downloadElement = document.createElement('a')
          downloadElement.href = res.data?.url;
          console.log(downloadElement.href);
          //下载后文件名
          downloadElement.download = res.data?.file_name;
          document.body.appendChild(downloadElement)
          //点击下载
          downloadElement.click()
          //下载完成移除元素
          document.body.removeChild(downloadElement)
          this.$toast.clear();
          // if (revokeObjectURL == null || revokeObjectURL) {
          //     //释放掉blob对象
          //     window.URL.revokeObjectURL(blobUrl)
          // }

        },
        err => {
          this.$toast.clear();
          reject(err);
        }
      );
    });
  },
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
  console.log(this.$parent.goods_info);
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
  .payDocument {
    padding:0.75rem;
    margin:0.625rem  0.625rem 0 0.625rem;
    border-radius: 0.625rem 0.625rem 0 0;
    background-color: #fff;
    h3 {
      font-size:0.875rem;
      color:#101010;
      text-align: left;
      padding:0 0 0.875rem 0;
      font-weight: 400;
    }
    .down-file {
      .file-item {
        color:#101010;
        font-size: 0.75rem;
        padding:0 0 1.125rem 0;
        &:last-child {
          padding:0;
        }
        div {
          text-align: left;
          flex:0 0 50%;
          span {
            color:#ff0000;
            cursor: pointer;
          }
        }
        
      }
    }
  }
  .file-service {
    border-radius:  0 0 0.625rem 0.625rem;
    margin:0 0.625rem 0.625rem 0.625rem;
    background-color: #FDF4ED;
    padding:0.625rem;
    .kefu {
      color:#DA4B76;
      padding:0.25rem;
      display: inline-block;
      background-color: #fff;
    }
    p {
      color:#E99854;
      padding-left: 0.625rem;
    }
  }
</style>